<template>
  <div class="index clmstart" @scroll="scrollTo($event)">
    <!-- 首页 -->
    <section class="section1 box bg clmcenter" id="scence">
      <nav>
        <img src="@/assets/img/logo.png" alt="logo" class="logo">
        <ul class="nav">
          <li v-for="(item) in navlist" :key="item.id" @click="goTo(item.href, item.id)"
            :class="{ 'active': item.active }"><a href="javascript:;">{{ item.title }}</a></li>
        </ul>
      </nav>
      <div class="ballbox clmcenter" data-depth="0.2">
        <img src="@/assets/img/ball.png" class="ball rotate" />
        <img src="@/assets/img/slogan.png" class="slogan" />
        <a class="enterbtn" @click.prevent="goTo('scence2')">
          <span>立刻进入</span>
          <img src="@/assets/img/icon_enter.png" class="icon_enter">
        </a>
      </div>
      <footer>
        <p class="cn">我们为品牌活动创造卓越的互动体验，并专注于最新的数字技术和互动设计。</p>
        <p class="en">We create excellent interactiveexperiences for branding events.And focus on latest
          digitaltechnology&interactive design.</p>
      </footer>
    </section>
    <!-- works -->
    <section class="section2" id="scence2">
      <div class="content">
        <div class="titlebox">
          <img src="@/assets/img/icon_enter.png" class="icon_title">
          <span>Selected Project</span>
        </div>
        <!-- 案例列表 -->
        <div class="worksbox">
          <div class="witem" v-for="item in workslist" :key="item.id" @click="$router.push('/detail')">
            <img :src="item.poster" class="wposter" :alt="item.title_cn">
            <p class="title_en">{{ item.title_en }}</p>
            <p class="title_cn">{{ item.title_cn }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue"
import Parallax from 'parallax-js'

const navlist = reactive([{
  id: 'home',
  title: '首页',
  href: 'scence',
  active: true
}, {
  id: 'works',
  title: 'WORKS',
  href: 'scence2',
  active: false
}])

const workslist = [{
  id: 1,
  title_en: 'ART REXHIBITION',
  title_cn: '北京三里屯欧莱雅艺术展',
  poster: new URL(`@/assets/img/cases/case1/poster.jpg`, import.meta.url).href
}, {
  id: 2,
  title_en: 'ART REXHIBITION',
  title_cn: '北京三里屯欧莱雅艺术展',
  poster: new URL(`@/assets/img/cases/case2/poster.jpg`, import.meta.url).href
}, {
  id: 3,
  title_en: 'ART REXHIBITION',
  title_cn: '北京三里屯欧莱雅艺术展',
  poster: new URL(`@/assets/img/cases/case2/poster.jpg`, import.meta.url).href
}, {
  id: 4,
  title_en: 'ART REXHIBITION',
  title_cn: '北京三里屯欧莱雅艺术展',
  poster: new URL(`@/assets/img/cases/case1/poster.jpg`, import.meta.url).href
}]


const goTo = (id, navid) => {
  let idel = document.getElementById(id)
  if (idel) {
    idel.scrollIntoView()
    navlist.forEach(item => {
      item.id === navid ? item.active = true : item.active = false
    })
  }
}

// 页面滚动事件
const scrollTo = (e) => {
  const bodyHeight = document.body.clientHeight
  if (e.target.scrollTop >= bodyHeight) {
    navlist.forEach(item => {
      item.id === 'works' ? item.active = true : item.active = false
    })
  } else {
    navlist.forEach(item => {
      item.id === 'home' ? item.active = true : item.active = false
    })
  }
}

onMounted(() => {
  var scence = document.getElementById('scence')
  var parallaxInstance = new Parallax(scence)
})
</script>
<style lang="scss">
nav {
  position: absolute !important;
  top: 2.6vw !important;
  width: 100vw;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  z-index: 99;

  .logo {
    margin-left: 4.5vw !important;
    width: 5.2%;
  }

  ul {
    margin-right: 6vw;

    li {
      display: inline-block;
      margin-left: 3.5vw;
      font-weight: 500;
      padding: 0.2vw;

      a {
        color: #fff;
        font-size: 1.29vw;
        text-transform: uppercase;
      }
    }

    .active {
      border-bottom: 2px solid #fff;
      box-sizing: border-box;
    }

    li:hover {
      border-bottom: 2px solid #fff;
      box-sizing: border-box;
    }

    li:last-child {
      a {
        font-family: Arial;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.index {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden scroll;

  .section1 {
    min-height: 100vh;
    pointer-events: all !important;

    .ballbox {
      position: relative !important;
      width: 32vw;
      height: 32vw;
      display: flex !important;

      // border: 1px solid #fff;
      // box-sizing: border-box;
      // background: url('@/assets/img/ball.png') no-repeat center;
      // background-size: 100%;   
      .ball {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
      }

      .rotate {
        animation: rotate 50s linear infinite;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      .slogan {
        position: relative !important;
        width: 101%;
        z-index: 1;
      }

      .enterbtn {
        position: relative !important;
        z-index: 1;
        display: flex !important;
        background: #fff;
        border-radius: 30px;
        width: 10vw;
        height: 2.2vw;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
        cursor: pointer;

        span {
          font-size: 1.14vw;
          letter-spacing: 3px;
          margin-right: 1vw;
        }

        .icon_enter {
          position: absolute;
          right: 0.5vw;
          width: 1.7vw;

        }
      }
    }

    footer {
      position: absolute !important;
      top: calc(100% - 6vw) !important;
      bottom: 2vw;
      width: 100%;
      height: 4vw;

      p {
        font-size: 1.22vw;
        color: #fff;
        line-height: 1.5;
      }

      .en {
        font-family: Arial;
        text-transform: uppercase;
      }
    }
  }

  .section2 {
    position: relative;
    width: 100%;
    height: auto;
    background: url('@/assets/img/bg2.jpg') no-repeat top center;
    background-size: cover;

    .content {
      width: 90%;
      margin: 50px auto;

      .titlebox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 50px;

        .icon_title {
          width: 1.8vw;
          height: 1.8vw;
        }

        span {
          font-family: Arial;
          font-size: 1.84vw;
          color: #fff;
          line-height: 2;
          padding-left: 0.5vw;
        }
      }

      .worksbox {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 42vw);
        grid-template-rows: repeat(auto-fill, 66vw);
        justify-content: space-between;
        margin-top: 0.8vw;

        .witem {
          width: 42vw;
          height: 66vw;

          .wposter {
            width: 100%;
            margin-top: 7.2vw;
          }

          p {
            text-align: left;
            line-height: 1.8;
          }

          .title_en {
            font-size: 1.84vw;
            text-transform: uppercase;
            color: #ec671a;
            padding-top: 0.8vw;
            font-family: Arial;
            font-weight: bold;
          }

          .title_cn {
            font-size: 1.23vw;
            color: #fff;
          }
        }

        .witem:nth-child(odd) {
          .wposter {
            margin-top: 0;
          }
        }
      }
    }
  }
}
</style>
